    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>login模态框</title>
        <script src="jQuery1.0.0.1.js"></script>
        <style>
            html,body{
                height: 100%;
                margin:0 ;
                padding: 0;
            }
            .mask{

                height: 100%;
                width: 100%;
                background: #999999;
                opacity: 0.8;
                position: fixed;
                left: 0;
                top: 0;
                display: none;
            }
            .login{
                background: white;
                color: chartreuse;
                font-size: 50px;
                position: absolute;
                left: 200px;
                top: 150px;
                height: 350px;
                width:500px;
                padding-top: 50px;
                text-align: center;
                line-height: 50px;
            }
        </style>
    </head>
    <body>

    <a href="#">注册</a>
    <a href="#">登录</a>

        <div class="mask" id="maskId">

            <div class="login" id="logind">
                登录
            </div>
        </div>
    <script>
        var a=document.getElementsByTagName('a')[1];
        var mask=document.getElementById('maskId');
        a.onclick=function (event) {
          show(mask);
            event = event || window.event;
            //阻止冒泡开始  如果不加该阻止冒泡函数那么 在a点击开始时候 那么会冒泡触动到ducument这个父辈级 也会触动其内部函数操作
            //导致a中的函数命令不能执行
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
            //阻止冒泡结束
        };

        document.onclick=function (event) {
            event=event||window.event;
            console.log(event.target);

            var aaa=event.target?event.target:event.srcElement;//兼容性获取目标函数


          if (aaa.id!=='logind'){
              hide(mask);
          }

        }
    </script>
    </body>
    </html>